<template>
 
	  <body  id="poster">
  	<el-container>
  		<el-header>
  			<el-row>
  				<el-col :span="21">
  					<span class="main_title">室外露天的大酒店</span>
  				</el-col>
  				<el-col :span="2"  >
  					<span style="color: #FFFFFF;">{{user.username}}</span>
  				</el-col>
  			</el-row>
  		</el-header>
		<div >
  		<el-container>
  		
  			<el-aside  >
  					<el-menu  class="menux">
  						<template  v-for="(menu,index) in menus">
							<template v-if="menu.parentid ==0">
								<el-submenu :index="index+''"  :key="index">
								
								<span slot="title" style="font-size: 30px; color: #DAA520;">
									<i class="el-icon-menu"></i>{{menu.title}}
								</span>
								
								<template v-for="(childMenu,chidIndex) in menus">
									
											<template v-if="menu.id == childMenu.parentid">
												<el-menu-item :key="chidIndex" @click="addTab(childMenu)">
											<router-link class="link" :to="{path:childMenu.url}">
												{{childMenu.title}}
											</router-link>
										</el-menu-item>
									</template>
									
								</template>
								
								</el-submenu>
							</template>
						</template>
  				
					</el-menu>
  			</el-aside>
  			
  			
  			<el-main>
  				<el-tabs type="card" closable v-model="activeName" @tab-click="handleClick" @tab-remove="handleRemove">
  					<el-tab-pane v-for="(item,index) in editableTabs" :label="item.title" :name="item.name">
  					
  					<component :is="item.componentName"></component>
  					</el-tab-pane>
  					
  				</el-tabs>
  			</el-main>
  			
  		</el-container>
		</div>
  		<el-footer>版权：<samp style="color: #FFFFFF; font-size: 20px;">小童携手小海携手小玉</samp> </el-footer>
  	</el-container>
	</body>
 
</template>
 
 
<script>
	import Vue from 'vue'
    export default {
       
        data() {
            return {
				//得到用户
               user:{},
			   //菜单
			   menus:[],
			   editableTabs:[],
			   activeName:'b'
            }
        },
        methods: {
           handleClick(){
			   
		   },
		   handleRemove(){
			   
		   },
		   addTab(menu){
			   let newTabName =menu.id+'';
			   //判断tabs中是否包含要添加的tab
			   let b=this.editableTabs.some(tab=>tab.name== newTabName);
			   if(!b){
			   	//添加新的选项卡
			   	this.editableTabs.push({
			   		title:menu.title,
			   		name:newTabName,
			   		componentName:'com'+newTabName//com1
			   	});
			   	
			   }
			   //全局注册一个组件
			   Vue.component('com'+newTabName,()=>import('@/views/'+menu.url+'.vue'))
			   this.activeName = newTabName;
		   },
		   handleRemove(targetName){
		       let temp = this.activeName;
		       if(this.activeName === targetName){
		        this.editableTabs.forEach((tab,index)=>{
		         if(tab.name === this.activeName){
		          let nextTab = this.editableTabs[index+1] || this.editableTabs[index-1];
		          if(nextTab){
		           temp = nextTab.name;
		          }
		         }
		        })
		       }
		       
		       this.activeName = temp;
		       this.editableTabs = this.editableTabs.filter(tab=>tab.name !== targetName);
		      },
        },
		created() {
			this.user=this.$getSessionStorage("user")
			console.log(this.user.roleid.id);
			let url ="menu/getroleid"
			//axios.post(url,`roleid=${this.user.roleid.id}`).then(resp=>{
			axios.post(url,`roleid=3`).then(resp=>{
				this.menus=resp.data.data
				console.log(this.menus);
			})
		}
    }
</script>
 
<style scoped="scoped">
	/* #poster {
	  background:url("../assets/c849de9a64574a15a5f793c66ce8e8dc.jpeg") no-repeat;
	  background-position: center;
	  height: 100%;
	  width: 100%;
	  margin-left: 0px;
	  margin-top: 0px;
	  background-size: cover;
	  position: fixed;
	} */
  .el-header,.el-footer{
  	height: 100px;
  	background-color: gray;
  }
  .el-aside{
  	height: 800px;
  }
  .link{
  	text-decoration:none;
  }
  .main_title{
  	font-size: 22px;
  	color: #fff;
  	height: 60px;
  	line-height: 60px;
  }
  .user_title{
  	font-size: 16px;
  	color: #FFFFFF;
  	line-height: 60px;
  	height: 60px;
  }
  .el-container{
  	height: 850px;
  }
  .el-dropdown-link{
  	color: #FFFFFF;
  	cursor: pointer;
  }
  /* .menux{
	
	  
	     background:rgba(0,0,0,0.5) none repeat scroll !important; 
		font-size: 50px;
	    background:#000; 
	    filter:Alpha(opacity=20);
	    width:500px; 
	    color:#F30;
  }
  .menuz{
	 background:rgba(0,0,0,0.2) none repeat scroll !important;
	 font-size: 50px;
	 background:#000; 
	 filter:Alpha(opacity=20);
	 width:500px; 
	 color:#F30;
  } */
</style>
